<!DOCTYPE html>
<html>
  <head>
    <title>Prepack &middot; Partial evaluator for JavaScript</title>
    <script src="js/prism.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tether-select/1.1.1/css/select-theme-dark.css"/>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.css"/>
    <link rel="stylesheet" href="css/style.css"/>
    <script>
      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
        (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
        m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
      })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
      ga('create', 'UA-44373548-29', 'auto');
      ga('send', 'pageview');
    </script>
  </head>
  <body>

    <nav class="nav">
      <div class="content-container">

        <div class="nav-left">
          <a class="nav-item is-brand" href="./">
            <img class="nav-logo" src="static/images/prepack_logo.png" alt="prepack logo"/>
            Prepack
          </a>
        </div>

        <span id="nav-toggle" class="nav-toggle">
          <span></span>
          <span></span>
          <span></span>
        </span>

        <div id="nav-menu" class="nav-right nav-menu">
          <a href="./" class="nav-item">About</a>
          <a href="getting-started.html" class="nav-item">Getting Started</a>
          <a href="frequently-asked-questions.html" class="nav-item">FAQs</a>
          <a href="repl.html" class="nav-item is-active">Try It Out</a>
          <a href="https://github.com/facebook/prepack" class="nav-item">GitHub</a>
        </div>

      </div>
    </nav>
    <div class="record-container">
      <div class="select-record-input">
        <select class="select-record">
          <option>1</option>
          <option>2</option>
          <option>3</option>
          <option>4</option>
        </select>
      </div>
      <div class="options-input">
        <div id="optionsMenuButton" class="options-menu-button">OPTIONS</div>
        <div id="optionsMenuRecord" class="options-menu-record"></div>
      </div>
      <div class="record-input">
        <input id="recordName" placeholder="demo name"/>
        <div id="saveBtn" class="record-button save">SAVE</div>
        <div id="deleteBtn" class="record-button delete">DELETE</div>
        <div id="graphBtn" class="record-button graphBtn">SHOW HEAP</div>
      </div>
    </div>
    <div class="repl-container">
      <div id="inputDiv" class="input">
        <div class="repl"></div>
        <div class="messagesContainer">
          <div class="messages"></div>
        </div>
      </div>

      <div id="outputDiv" class="output">
        <div class="repl"></div>
      </div>
      <div id="graph" class ="graph">
        <div id="graphBox" class="graphBox"></div>
        <div class="graphLegend">
          <h3 class="legend-header">Legend</h3>
          <table class = "legend-table" cellspacing="10px">
            <tr>
              <td><img src="static/images/red_circle.png" height=42 width=42> <div>Function Value </div></td>
              <td><img src="static/images/blue_box.png" height=42 width=42><div>Object Value </div></td>
              <td><img src="static/images/green_diamond.png" height=42 width=42><div>Abstract Value </div></td>
              <td><img src="static/images/yellow_star.png" height=42 width=42><div>Symbol Value</div></td>
              <td><img src="static/images/orange_triangle.png" height=42 width=42><div>Proxy Value</div></td>
              <td><img src="static/images/grey_ellipse.png" height=42 width=42><div>Other</div></td>
            </tr>
          </table>
        </div>
      </div>
    </div>


    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.1.3/ace.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lz-string/1.4.4/lz-string.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.3/js/tether.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether-select/1.1.1/js/select.min.js"></script>
    <script src="js/repl.js"></script>
    <script src="js/toggle_menu.js"></script>
  </body>
</html>
